<template>
	<view class="col" style="height: 100vh;">
		<view class="row" style="margin-left: 30rpx;margin-right: 30rpx;margin-top: 80rpx;">
			<image src="/static/images/search.svg" class="close"></image>
			<u-input border="bottom" placeholder="输入搜索内容" class="search-text" :fontSize="20" style="border-bottom: 5rpx solid #888888 ;" v-model="keyword"> </u-input>
			<image src="/static/images/close.svg" class="close" @click="goback"></image>
		</view>
		<view class="bg">
			<view class="row-between-center" style="margin-left: 200rpx;margin-right: 200rpx;margin-top: 40rpx;">
				<view class="col" @click="changeCategory(0)" >
					<view :class="clickIndex==0?'active':'deactive'">作品</view>
					<view :class="clickIndex==0?'line':'line2'"></view>
				</view>
				
				<view class="col" @click="changeCategory(1)"  >
					<view :class="clickIndex==1?'active':'deactive'">章节</view>
					<view :class="clickIndex==1?'line':'line2'"></view>
				</view>
			</view>
			<view style="margin-top: 20rpx;"></view>
			<view v-if="clickIndex==0">
				<view v-for="item in 4" class="item col" >
					<view class="row-between-center">
						<view class="title singe-line">
							{{item.title}}
						</view>
						<image src="/static/images/search_star.svg" class="star"></image>
					</view>
					<view class="img"></view>
					<view class="row-between-center" style="margin-top: 10rpx;">
						<view class="update">更新至:#{{item.itemNum}}章节名称</view>
						<view class="count">人气 {{item.flowNum}}</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view v-for="item in 4" class="item col" >
					<view class="row">
						<view class="book">
						</view>
						<view class="col" style="margin-left: 20rpx;width: 100%;">
							<view class="book-title">
								灌篮高手 全国大赛篇
							</view>
							<view class="book-category">
								#1 天才薄命
							</view>
							<view class="row-end book-time">
								0000-00-00 00:00
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import {searchTop,addFlow,searchKeyword} from '@/api/change/index.js'
	export default {
		data() {
			return {
				clickIndex:0,
				name:'',
				list:[],
				keyword:'',
				pageType:''
				// 1飙升榜，2：人气榜，3：打赏榜，4：畅销版，5：新书版
			}
		},
		onLoad(option) {
			this.name = option.name
			this.keyword = option.name
			this.getKeyword()
			// if(option.type == 'quick'){
			// 	this.getKeyword()
			// }else{
			// 	this.getTop()
			// }
		},
		methods: {
			
			changeCategory(index){
				this.clickIndex = index;
			},
			
			goback(){
				uni.navigateBack()
			},
			getTop(){
				if(this.name == '飙升榜'){
					this.pageType =1
				}else if(this.name == '人气榜'){
					this.pageType =2
				}else if(this.name == '打赏榜'){
					this.pageType =3
				}else if(this.name == '畅销版'){
					this.pageType =4
				}else if(this.name == '新书版'){
					this.pageType =5
				}
				searchTop({pageType:this.pageType}).then(res=>{
					this.list =res.data
				})
			},
		addFollow(item) {
			addFlow({workId:item.id}).then(res => {
				if(!item.isFlow){
					item.isFlow=1
				}else{
					item.isFlow=0
				}
			})
		},
			getKeyword(){
				searchKeyword({keyword:this.keyword,page:this.page,pageSize:this.pageSize}).then(res=>{
					
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	.close{
		width: 60rpx;
		height: 60rpx;
	}
	.search-text{
		width: 500rpx;
		font-size: 60rpx;
	}
	.active{
		font-size: 30rpx;
		color: #101010;
	}
	.deactive{
		font-size: 30rpx;
		color: #9A9A9A;
	}
	.line{
		width: 60rpx;
		height: 5rpx;
		background-color: #BD3124;
	}
	.line2{
		width: 60rpx;
		height: 5rpx;
	}
	.item{
		padding: 20rpx 30rpx;
		border-radius: 30rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		margin-bottom: 40rpx;
		.title{
			color: rgba(16, 16, 16, 1);
			font-size: 56rpx;
			font-family: PMZDBiaoTi-regular;
		}
		.star{
			width: 60rpx;
			height: 60rpx;
		}
		.img{
			margin-top: 10rpx;
			background-color: red;
			width: 100%;
			height: 360rpx;
			border-radius: 10px;
		}
		.update{
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
		}
		.count{
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
		}
		
		.book{
			flex-shrink: 0;
			background-color: red;
			width: 200rpx;
			height: 240rpx;
			border-radius: 20rpx;
		}
		.book-title{
			color: rgba(0, 0, 0, 1);
			font-size: 40rpx;
		}
		.book-category{
			margin-top: 10rpx;
			color: rgba(0, 0, 0, 1);
			font-size: 40rpx;
			font-weight: bold;
		}
		.book-time{
			margin-top: 80rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
		}
	}
	.bg{
		margin-top: 20rpx;
		height: 100%;
		flex: 1;
		border-radius: 50rpx 50rpx 0 0 ;
		background-color: rgba(248, 248, 248, 1);
	}
	
	
	
</style>
